<!DOCTYPE html>
<html lang="en">
<head>
   
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>22001010608滕旋州</title>
    <link rel="stylesheet" href="./font/iconfont.css">
    <link rel="stylesheet" href="./index22.css">
    <link rel="stylesheet" href="./tengxuanzhou.css">
    <link rel="stylesheet" href="./fontindex/iconfont.css">
    
    
    
</head>
<body>
    
    <div class="txzbox">
        <div class="txzsidex">
                <div class="cad"><a href="#">手机虎扑</a></div>
                <div class="line"></div>
                <div class="cad"><a href="#">下载虎扑APP</a></div>
                <div class="line"></div>
                <div class="cad"><a href="#">加入虎扑</a></div>
            
            
            <div class="right" >
                <span>欢迎加入虎扑    请先</span>
                <div class="txzbox4"><a href="#">注册</a></div>
                <span>或</span>
                <div class="txzbox4"><a href="./login.html">登录</a></div>

            </div>
            

            

        </div>
        <div class="txzxidex">
            <div class="txzbox2"></div>
            <div class="txzbox2"></div>
            <div class="txzbox3"><a href="#">虎扑首页</a></div>
            <div class="txzbox3"><a href="#">NBA</a></div>
            <div class="txzbox3"><a href="#">CBA</a></div>
            <div class="txzbox3"><a href="#">足球</a></div>
            <div class="txzbox3"><a href="#">步行街</a></div>
            <div class="txzbox3"><a href="#">社区</a></div>
            <div class="txzbox3"><a href="#">电竞</a></div>
            <div class="txzbox2"></div>
            
            
        </div>
    </div>
    <div class="da1210b" >
        <div class="da1210bl">
            <div class="sidebar">
                <h4>我的关注</h4>
                <ul>
                    <li><a href="#">+ 添加更多关注</a></li>
                </ul>
                
            </div>
            <div class="topic-section">
                <div class="topic-header">
                    <span>话题广场</span>
                    <span id="toggle-button">收起</span>
                </div>
                <ul class="topic-list" id="topic-list">
                    <!-- 动态渲染话题内容 -->
                </ul>
            </div>
        </div>
        <div class="da1210bc">
            <div class="main-content">
                <h4>关注的帖子</h4>
                <div class="post">
                    <div class="post-title">分享一次失败的离婚经历</div>
                    <div class="post-meta">19回复 - 恋爱区</div>
                </div>
                <div class="post">
                    <div class="post-title">国内还有北《驱魔者》重看经典，复看李连杰的电影！</div>
                    <div class="post-meta">76回复 - 影视区</div>
                </div>
                <div class="post">
                    <div class="post-title">李渊有什么办法让李建成顺利继位？</div>
                    <div class="post-meta">76回复 - 影视区</div>
                </div>
                <div class="post">
                    <div class="post-title">真诚发问老哥们，退役大学生，考公还是考研？</div>
                    <div class="post-meta">76回复 - 影视区</div>
                </div>
                <div class="post">
                    <div class="post-title">电视剧《我是刑警》，某些官员的不作为，严重拖慢办案进度</div>
                    <div class="post-meta">76回复 - 影视区</div>
                </div>
                <div class="post">
                    <div class="post-title">颜值PK，1974年出生9大女星vs1979年出生9大女星，9人综合颜值</div>
                    <div class="post-meta">76回复 - 影视区</div>
                </div>
                <div class="post">
                    <div class="post-title">邓紫棋太有意思了，先是和杨笠讨论“奋斗多大劲”破防了一堆人</div>
                    <div class="post-meta">76回复 - 影视区</div>
                </div>
                <div class="post">
                    <div class="post-title">阿萨德私人车库都不要了，叙利亚人进去开走宾利</div>
                    <div class="post-meta">76回复 - 影视区</div>
                </div>
                <div class="post">
                    <div class="post-title">国内还有北《驱魔者》重看经典，复看李连杰的电影！</div>
                    <div class="post-meta">76回复 - 影视区</div>
                </div>
            </div>
            <div class="hot-posts-section">
                <div class="hot-posts-header">
                    <h4>
                        <span class="iconfont icon-fire"></span>
                        虎扑社区热帖
                    </h4>
                    <div class="view-toggle">
                        视图：
                        <img src="./img/屏幕截图 2024-12-10 144314.png" alt="列表">
                    </div>
                </div>
                <ul class="hot-posts-list" id="hot-posts-list">
                    <!-- 动态渲染热帖内容 -->
                </ul>
            </div>
        </div>
        <div class="da1210br">
            <div class="rightbar">
                <h4>虎扑社区热帖</h4>
                <ul>
                    <li><a href="#">【每日热议】腾讯视频会员...</a></li>
                    <li><a href="#">《流浪地球2》导演宣布新计划...</a></li>
                </ul>
                <h4>虎扑热搜</h4>
                <ul class="hot-search">
                    <li><span>1. 巴恩斯</span></li>
                    <li><span>2. 勒伯朗</span></li>
                    <li><span>3. 希罗</span></li>
                </ul>
            </div>
        </div>
    </div>
    <script>
        // 模拟 JSON 数据
        const topics = [
            {
                title: "综合体育",
                icon: "./img/831551-soccer-sports-sport-poster.jpg",
                subTopics: ["乒乓球区", "格斗专区", "NFL专区", "综合体育区"]
            },
            {
                title: "步行街",
                icon: "./img/OIP.jpg",
                subTopics: ["步行街主干道", "恋爱区", "历史区", "职场区"]
            },
            {
                title: "影视娱乐",
                icon: "./img/0012.jpg_wh300.jpg",
                subTopics: ["影视区", "娱乐圈", "音乐圈"]
            },
            {
                title: "英雄联盟",
                icon: "./img/R.jpg",
                subTopics: ["英雄联盟", "IG专区", "T1专区", "TES专区"]
            },
            {
                title: "游戏",
                icon: "./img/0012.jpg_wh300.jpg",
                subTopics: ["绝地求生", "NBA2KOL2", "王者荣耀", "CS2"]
            },
            {
                title: "NBA",
                icon: "./img/OIP.jpg",
                subTopics: ["篮球资讯", "湿乎乎的话题", "勇士专区", "快船专区"]
            },
            {
                title: "装备",
                icon: "./img/R.jpg",
                subTopics: ["运动装备", "潮流区", "球衣区"]
            }
        ];

        // 动态渲染话题列表
        const topicList = document.getElementById("topic-list");

        topics.forEach(topic => {
            const topicItem = document.createElement("li");
            topicItem.className = "topic-item";
            topicItem.innerHTML = `
                <h4>
                    <img src="${topic.icon}" alt="${topic.title}">
                    ${topic.title}
                </h4>
                <ul>
                    ${topic.subTopics.map(sub => `<li><a href="#">${sub}</a></li>`).join("")}
                </ul>
            `;
            topicList.appendChild(topicItem);
        });

        // 折叠/展开功能
        const toggleButton = document.getElementById("toggle-button");
        toggleButton.addEventListener("click", () => {
            if (topicList.style.display === "none") {
                topicList.style.display = "block";
                toggleButton.textContent = "收起";
            } else {
                topicList.style.display = "none";
                toggleButton.textContent = "展开";
            }
        });
        const hotPosts = [
            {
                title: "【每日茶水间】腾讯视频新会员只能同时1台设备播放，JRs怎么看待",
                highlights: "50亮",
                replies: "702回复",
                category: "步行街主干道"
            },
            {
                title: "5w到100w第793天",
                highlights: "38亮",
                replies: "131回复",
                category: "股票区"
            },
            {
                title: "陪下一做:新系列！东北饭店老板教你做正宗锅包肉！",
                highlights: "50亮",
                replies: "195回复",
                category: "步行街主干道"
            },
            {
                title: "收了饭堂阿姨的采购权，结果阿姨在前，头大",
                highlights: "50亮",
                replies: "477回复",
                category: "步行街主干道"
            },
            {
                title: "《X战警》北极星扮演者Emma Dumont宣布出柜，承认自己是跨性别",
                highlights: "47亮",
                replies: "173回复",
                category: "步行街主干道"
            },
            {
                title: "全网最怂小老虎。",
                highlights: "29亮",
                replies: "56回复",
                category: "动物萌宠区"
            }
        ];

        // 动态渲染热帖列表
        const hotPostsList = document.getElementById("hot-posts-list");

        hotPosts.forEach(post => {
            const postItem = document.createElement("li");
            postItem.className = "hot-post-item";
            postItem.innerHTML = `
                <div class="post-content">
                    <a href="#">${post.title}</a>
                    <div class="post-meta">${post.highlights} | ${post.replies}</div>
                </div>
                <div class="post-category">${post.category}</div>
            `;
            hotPostsList.appendChild(postItem);
        });
    </script>
</body>
</html>